<template>
  <div class="tabs">
    <el-tag v-for="item in tabs" class="el_tag" :key="item.meta.title" type="success" :closable="item.path != '/home'"
      @click.native="skipPath(item)" :effect="item.effect" @close="handleClose(item)">
      {{ item.meta.title }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: 'CommonTag',
  data() {
    return {
      tabs: []
    }
  },
  methods: {
    handleClose(tag) {
      this.tabs.forEach((i) => {
        // 点击路径 与 数组中路径相同
        if (i.meta.title == tag.meta.title) {
          this.tabs.splice(this.tabs.indexOf(i), 1)
          let path = this.tabs[this.tabs.length - 1].path
          this.$router.push({
            path
          })
        }
      })
    },
    // 点击标签页跳转路径
    skipPath(item) {
      this.$router.push({
        path: item.path
      })
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        // 过滤目标路径
        let arr = to.matched.filter((item) => {
          if (item.meta.title) return item
        })
        // 拿到目标对象的路径
        let toPath = arr[0].path;
        // 截取最后一位字符串
        let lastString = toPath.substring(toPath.length - 1);
        // 判断 最后一位字符串  是否 ==  '/'
        if (lastString === '/') {
          // 如果是  删除最后一位
          arr[0].path = arr[0].path.substring(0, arr[0].path.length - 1);
        }
        // 添加一个属性默认 plain
        arr[0].effect = 'plain'
        // 判断第一次的目标路径是否为首页
        if (arr[0].meta.title !== '首页') {
          // 如果不是首页  继续向数组追加
          this.tabs.push(arr[0])
          // 数组去重
          this.tabs = [...new Set(this.tabs)]
        }
        // 声明一个状态
        let state = true
        // 遍历数组
        this.tabs.forEach(item => {
          // 判断数组中每一项的标题
          // 如果有首页
          if (item.meta.title == '首页') {
            // 状态为false
            state = false
          }
        })
        // state==true 则 没有首页
        // 没有首页向数组首位添加
        if (state) {
          this.tabs.unshift({
            path: '/home',
            effect: 'plain',
            meta: {
              title: '首页'
            }
          })
        }
        // path ==> 当前路由跳转路径
        // path与item.path判断, 如果相同 则使用高亮效果,其他使用默认plain
        let path = this.$route.path
        this.tabs.forEach((item) => {
          item.effect = 'plain'
          if (item.path == path) {
            item.effect = 'dark'
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.tabs {
  margin: 10px 0 20px 20px;
}

.el_tag {
  margin-left: 10px;
}
</style>